<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>地方</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    
    <link href="https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Abril+Fatface" rel="stylesheet">

    <link rel="stylesheet" href="${pageContext.request.contextPath}/user/css/open-iconic-bootstrap.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/user/css/animate.css">
    
    <link rel="stylesheet" href="${pageContext.request.contextPath}/user/css/owl.carousel.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/user/css/owl.theme.default.min.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/user/css/magnific-popup.css">

    <link rel="stylesheet" href="${pageContext.request.contextPath}/user/css/aos.css">

    <link rel="stylesheet" href="${pageContext.request.contextPath}/user/css/ionicons.min.css">

    <link rel="stylesheet" href="${pageContext.request.contextPath}/user/css/bootstrap-datepicker.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/user/css/jquery.timepicker.css">

    
    <link rel="stylesheet" href="${pageContext.request.contextPath}/user/css/flaticon.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/user/css/icomoon.css">
    <link rel="stylesheet" href="${pageContext.request.contextPath}/user/css/style.css">
    
 	<link rel="stylesheet" href="layui/css/layui.css" media="all">
 	<link rel="stylesheet" href="layui/css/MyBoot.css" media="all">
  </head>
  <body>
    <!-- 小地图弹窗开始 -->
   
<div class="modaloo fadeoo inoo row" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" >
			<div class="modal-dialogoo" >
				<div class="modal-contentoo">
					
					<div class="modal-bodyoo " id="allmap" style="width: 400px;height: 400px;">
						
					</div>
					<div class="modal-footeroo" >
						<button type="button" class="btn btn-default" data-dismiss="modal" id="close_tangchuang">关闭
				</button>
					</div>
				</div>
				<!-- /.modal-content -->
			  </div>
			<!-- /.modal-dialog -->
		</div>



<!-- 小地图弹窗结束 -->	
    
    
	 <jsp:include page="nav.jsp"></jsp:include>
    <!-- END nav -->
    
    <div class="hero-wrap js-fullheight" style="background-image: url('${pageContext.request.contextPath}/user/images/bg_1.jpg');">
      <div class="overlay"></div>
      <div class="container">
        <div class="row no-gutters slider-text js-fullheight align-items-center justify-content-center" data-scrollax-parent="true">
          <div class="col-md-9 text-center ftco-animate" data-scrollax=" properties: { translateY: '70%' }">
            <p class="breadcrumbs" data-scrollax="properties: { translateY: '30%', opacity: 1.6 }"><span class="mr-2"><a href="index">主页</a></span> <span>住所</span></p>
            <h1 class="mb-3 bread" data-scrollax="properties: { translateY: '30%', opacity: 1.6 }">目的地</h1>
          </div>
        </div>
      </div>
    </div>
		
		<section class="ftco-section">
      <div class="container">
        <div class="row">
        	<div class="col-lg-3 sidebar order-md-last ftco-animate">
        		<div class="sidebar-wrap ftco-animate">
        			<h3 class="heading mb-4">定位城市</h3>
        			
        				<div class="fields">
		              <div class="form-group">
		                <div class="select-wrap one-third">
	                    <div class="icon"><span class="ion-ios-arrow-down"></span></div>
	                    <select name="provideId" id="provide" class="form-control" placeholder="Keyword search">
	                      <option value="0">选择省份</option>

	                    </select>
	                  </div>
		              </div>
		              <div class="form-group">
		                <div class="select-wrap one-third">
	                    <div class="icon"><span class="ion-ios-arrow-down"></span></div>
	                    <select name="cityId" id="city" class="form-control" placeholder="Keyword search">
	                      <option value="0">选择城市</option>
	                    </select>
	                  </div>
		              </div>
		            <div class="form-group">
		                <div class="select-wrap one-third">
	                    <div class="icon"><span class="ion-ios-arrow-down"></span></div>
	                    <select name="hobbyId" id="hobby" class="form-control" placeholder="Keyword search">
	                      <option value="0">选择景点主题</option>
	                    </select>
	                  </div>
		              </div>
		              <div class="form-group">
		                
		                <button class="btn btn-primary py-3 px-5" id="click_my_select">搜索</button>
		              </div>
		            </div>
	            
        		</div>
        		
          </div><!-- END-->
          <div class="col-lg-9">
          	<div class="row" id="scenic_row_my">
          	
          	</div>
          	<div class="row mt-5">
		          <div class="col text-center">
		          <!-- 分页栏 -->
				<div id="pageDiv2"></div>
		           <!--  <div class="block-27">
		              <ul>
		                <li><a href="#">&lt;</a></li>
		                <li class="active"><span>1</span></li>
		                <li><a href="#">2</a></li>
		                <li><a href="#">3</a></li>
		                <li><a href="#">4</a></li>
		                <li><a href="#">5</a></li>
		                <li><a href="#">&gt;</a></li>
		              </ul>
		            </div>--> 
		          </div>
		        </div>
          </div> <!-- .col-md-8 -->
        </div>
      </div>
    </section> <!-- .section -->

		<section class="ftco-section-parallax">
      <div class="parallax-img d-flex align-items-center">
        <div class="container">
          <div class="row d-flex justify-content-center">
            <div class="col-md-7 text-center heading-section heading-section-white ftco-animate">
              <h2>订阅我们</h2>
          
              <div class="row d-flex justify-content-center mt-5">
                <div class="col-md-8">
                  <form action="#" class="subscribe-form">
                    <div class="form-group d-flex">
                      <input type="text" class="form-control" placeholder="邮箱地址">
                      <input type="submit" value="订阅" class="submit px-3">
                    </div>
                  </form>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

  <jsp:include page="footer.jsp"></jsp:include>
    
    
   <script src="layui/layui.js" charset="utf-8"></script>		
	<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
	<script type="text/javascript">
	//**页面加载开始****************
	$(document).ready(function(){
		//**加载景点主题开始**************
		$.ajax({
    			url:'/happySys/hobby/findall',
    			type:'get',
    			dataType:'json',
    			//data:$("#update_form").serialize(),
    			success:function(data){
    				$.each(data,function(i){
    					//alert(data[i].htype+":"+data[i].hid)
    					$('#hobby').append('<option value="'+data[i].hid+'">'+data[i].htype+'</option>');
    				});				
    			}
    			
    		});
		//****加载景点结束*************
		//***加载省份开始*************
		$.ajax({
    			url:'/happySys/province/findall',
    			type:'get',
    			dataType:'json',
    			//data:$("#update_form").serialize(),
    			success:function(data){
    				$.each(data,function(i){
    					//alert(data[i].htype+":"+data[i].hid)
    					$('#provide').append('<option value="'+data[i].provinceid+'">'+data[i].provincename+'</option>');
    				});				
    			}
    			
    		});
		//***加载省份结束************
		//****加载全国所有的景点开始**********
		 find()
		//****加载全国所有景点结束***********
		
	});
	//**页面加载结束**********
	//******根据选择的省份加载该省份的所有城市开始***
	$("#provide").blur(function() {
		
		//alert($(this).val())
		$('#city').empty();
		$('#city').append('<option value="0">选择城市</option>');
		$.ajax({
			url:'/happySys/city/findcitybyproid',
			type:'get',
			dataType:'json',
			data:{
				pid:$(this).val()
			},
			success:function(data){
				$.each(data,function(i){
					//alert(data[i].htype+":"+data[i].hid)
					$('#city').append('<option value="'+data[i].cityid+'">'+data[i].cityname+'</option>');
				});				
			}
			
		});
		
		
	});
	//******根据选择的省份加载该省份的所有城市结束***
	//*******点击按省份，市，主题检索景点开始*****
	$('#click_my_select').click(function(){
		find()
	});
	//*******点击按省份，市，主题检索景点结束*****
	//************查询景点*****
	function find(){
		$.ajax({
			url:'/happySys/scenic/findallScenic',
			type:'get',
			dataType:'json',
			data:{
				page:1,
				pageSize:10,
				pid	:$("#provide").val(),
				cid:$("#city").val(),
				hid:$("#hobby").val()
			},
			success:function(msg){
				$('#scenic_row_my').empty();
				$.each(msg.data,function(i){
					var sname = msg.data[i].sname;
					var saddress = msg.data[i].saddress;
					var ssatisfaction = msg.data[i].ssatisfaction;
					var sprovince = msg.data[i].sprovince;
					var scity = msg.data[i].scity;
					var sticket = "￥"+msg.data[i].sticket+"起";
					var sid = msg.data[i].sid;
					var sbt = msg.data[i].sbt;
					var slong = msg.data[i].slong;//经度
					var slat = msg.data[i].slat;//纬度
					var img = msg.data[i].bigimg[3].spurl;
					//alert("sname:"+sname+";saddress:"+saddress+";sticket:"+sticket+";img:"+img);
					$('#scenic_row_my').append('<div class="col-sm col-md-6 col-lg-5 ">'+
	    				'<div class="destination">'+
	    					'<a href="#" class="img img-2 d-flex justify-content-center align-items-center" style="background-image: url('+img+');width: 300px;height: 150px;">'+
	    						'<div class="icon d-flex justify-content-center align-items-center">'+
	    							'<span class="icon-link"></span>'+
	    						'</div>'+
	    					'</a>'+
	    					'<div class="text p-3">'+
	    						'<div class="d-flex">'+
	    							'<div class="one">'+
			    						'<h3><a href="#">'+sname+'</a></h3>'+
			    						'<p class="rate">'+
			    						'['+sprovince+'.'+scity+']'+
			    						'</p>'+
		    						'</div>'+
		    						'<div class="two">'+
		    							'<span class="price">'+sticket+'</span>'+
	    							'</div>'+
	    						'</div>'+
	    						'<p>满意度：'+ssatisfaction+'</p>'+
	    						'<p class="days"><a  href="javascript:showMap('+slat+','+slong+');">[查看地图]</a></p>'+
	    						'<hr>'+
	    						'<p class="bottom-area d-flex">'+
	    							'<span><i class="icon-map-o"></i> San Franciso, CA</span>'+
	    							'<span class="ml-auto"><a href="'+sbt+'" target="_blank">购票</a></span>'+
	    						'</p>'+
	    					'</div>'+
	    				'</div>'+
	    			'</div>');
				});		
				 //**************layui开始**********	
				layui.use(['laypage', 'layer'], function(){
				  var laypage = layui.laypage
				  ,layer = layui.layer;
				  
				//完整功能
				  laypage.render({
				    elem: 'pageDiv2'
				    ,count:msg.count  //data.total ,
				    ,curr:msg.page					//data.page
				   ,limit:msg.limit			//pageSize
				    ,layout: ['count', 'prev', 'page','limit','next', 'skip']
				    ,jump: function(obj,first){
				      console.log(obj);
				      console.log(first);
				    //首次不执行
				      if(!first){
				    	  //清除ul中 li
				    	$('#scenic_row_my').empty();
				    	  //*******************点击分页开始**************************
				    	  $.ajax({
							url:'/happySys/scenic/findallScenic',
							type:'get',
							dataType:'json',							
							data:{
								page:obj.curr,
								pageSize:obj.limit,
								pid	:$("#provide").val(),
								cid:$("#city").val(),
								hid:$("#hobby").val()
							},
							success:function(msg){
								
								$.each(msg.data,function(i){
			    					var sname = msg.data[i].sname;
			    					var saddress = msg.data[i].saddress;
			    					var ssatisfaction = msg.data[i].ssatisfaction;
			    					var sprovince = msg.data[i].sprovince;
			    					var scity = msg.data[i].scity;
			    					var sticket = "￥"+msg.data[i].sticket+"起";
			    					var sid = msg.data[i].sid;
			    					var sbt = msg.data[i].sbt;
			    					var slong = msg.data[i].slong;//经度
			    					var slat = msg.data[i].slat;//纬度
			    					var img = msg.data[i].bigimg[3].spurl;
			    					//alert("sname:"+sname+";saddress:"+saddress+";sticket:"+sticket+";img:"+img);
			    					$('#scenic_row_my').append('<div class="col-sm col-md-6 col-lg-5 ">'+
					    				'<div class="destination">'+
					    					'<a href="#" class="img img-2 d-flex justify-content-center align-items-center" style="background-image: url('+img+');width: 300px;height: 150px;">'+
					    						'<div class="icon d-flex justify-content-center align-items-center">'+
					    							'<span class="icon-link"></span>'+
					    						'</div>'+
					    					'</a>'+
					    					'<div class="text p-3">'+
					    						'<div class="d-flex">'+
					    							'<div class="one">'+
							    						'<h3><a href="#">'+sname+'</a></h3>'+
							    						'<p class="rate">'+
							    						'['+sprovince+'.'+scity+']'+
							    						'</p>'+
						    						'</div>'+
						    						'<div class="two">'+
						    							'<span class="price">'+sticket+'</span>'+
					    							'</div>'+
					    						'</div>'+
					    						'<p>满意度：'+ssatisfaction+'</p>'+
					    						'<p class="days"><a  href="javascript:showMap('+slat+','+slong+');">[查看地图]</a></p>'+
					    						'<hr>'+
					    						'<p class="bottom-area d-flex">'+
					    							'<span><i class="icon-map-o"></i> San Franciso, CA</span>'+
					    							'<span class="ml-auto"><a href="'+sbt+'" target="_blank">购票</a></span>'+
					    						'</p>'+
					    					'</div>'+
					    				'</div>'+
					    			'</div>');
			    				});		
								
								
								}
							});
				    	    
				    	  //********************点击分页结束*************************
				    	//  location.href="../allmv?op=findAll&page="+obj.curr+"&pageSize="+obj.limit;
				      }
				    }
				  });
				 
				}); 
				//***************layui结束***********
			}  			
		});
		
	}
	//*********景点查询结束****
	</script>
	
	<!-- 百度小地图 -->
	<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=IkB2sI3mEfxhf9ZjA7UDZFpw7QoHheTp"></script>
	<script type="text/javascript">	
		
		function showMap(x,y){
			
			$("#myModal").attr("style","display: block; padding-left: 417px;top:200px; width:700px;");//开启小弹窗
			var map = new BMap.Map("allmap");
			map.centerAndZoom(new BMap.Point(y,x),11);
			map.enableScrollWheelZoom(true);
			
			map.clearOverlays(); 
			var new_point = new BMap.Point(y,x);
			var marker = new BMap.Marker(new_point);  
			map.addOverlay(marker);             
			map.panTo(new_point);      	
	}
		$("#close_tangchuang").click(function(){
			$("#myModal").attr("style","display: none; padding-left: 417px;top:200px; width:700px;");
		});
	</script>
  </body>
</html>